<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: `${type == 'add' ? '新增' : '修改'}标签`,
			size: '500px',
			appendToBody: true
		}"
		show-confirm
		confirm-text="提交"
		@close="reset"
		@confirm="submit"
		:saving="saving"
	>
		<el-card shadow="never">
			<el-form
				:model="form"
				:rules="rules"
				ref="form"
				label-position="top"
				:disabled="saving"
			>
				<el-form-item label="所属事业部" prop="biz_id">
					<cl-select
						v-model="form.biz_id"
						filterable
						style="width: 100%"
						:disabled="type == 'edit'"
					>
						<el-option
							v-for="(item, index) in business"
							:key="index"
							:label="item.biz_name"
							:value="item.biz_id"
						/>
					</cl-select>
				</el-form-item>
				<el-form-item label="标签名称" prop="tname">
					<el-input v-model="form.tname" placeholder="标签名称" />
				</el-form-item>
				<el-form-item label="类型" prop="type">
					<cl-select v-model="form.type" placeholder="请选择" style="width: 100%">
						<el-option
							v-for="item in typeList"
							:key="item.value"
							:label="item.name"
							:value="item.value"
						/>
					</cl-select>
				</el-form-item>
				<el-form-item label="状态" prop="status" v-if="type == 'edit'">
					<cl-select v-model="form.status" placeholder="请选择" style="width: 100%">
						<el-option label="正常" :value="1" />
						<el-option label="禁用" :value="0" />
					</cl-select>
				</el-form-item>
				<el-form-item label="排序" prop="sort">
					<el-input
						v-model.number="form.sort"
						oninput="value=value.replace(/[^\d]/g,'')"
						@blur="form.sort = $event.target.value"
						placeholder="请填写"
					/>
				</el-form-item>
			</el-form>
		</el-card>
	</cl-drawer>
</template>
<script>
export default {
	data() {
		return {
			rules: {
				tname: [{ required: true, message: "请填写标签名" }],
				biz_id: [{ required: true, message: "请选择事业部" }],
				type: [{ required: true, message: "请选择类型" }],
				sort: [{ required: true, message: "请填写排序" }],
				status: [{ required: true, message: "请选择状态" }]
			},
			form: {
				id: undefined,
				biz_id: "",
				tname: "",
				type: "",
				sort: "",
				status: "1"
			},
			//类型
			typeList: [
				{ name: "服务", value: 1 },
				{ name: "产品", value: 2 },
				{ name: "卡", value: 3 },
				{ name: "其他", value: 4 }
			],
			type: "add",
			saving: false
		};
	},
	created() {
		this.form.biz_id = this.getCurrBiz();
	},
	methods: {
		open(type = "add", data = {}) {
			this.$refs.drawer.create();
			this.type = type;
			Object.keys(this.form).forEach(k => {
				data[k] != undefined && (this.form[k] = data[k]);
			});
		},
		close() {
			this.$refs.drawer.close();
		},
		reset() {
			this.form = {
				id: undefined,
				biz_id: this.getCurrBiz(),
				tname: "",
				type: "",
				sort: "",
				status: "1"
			};
			this.$refs.form.resetFields();
		},
		submit() {
			this.$refs.form.validate(async valid => {
				if (!valid) return;
				this.saving = true;
				await this.$service.tag[this.type](this.form).done(() => {
					this.saving = false;
				});
				const { biz_id } = this.form;
				this.$emit("confirm", biz_id, this.type == "add" ? true : false);
				this.$message.success(
					`${this.type == "add" ? "新增" : this.type == "copy" ? "复制" : "修改"}成功`
				);
				this.close();
			});
		}
	}
};
</script>
